import "./index.less"
import { BellOutlined, TeamOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { logout } from '../../component/actions';

function Header() {
    const isLoggedIn = useSelector((state: any) => state.isLoggedIn);
    const account = useSelector((state: any) => state.account);
    const dispatch = useDispatch();

    const login = () => {
        console.log("login");
    }
    const register = () => {
        console.log("register");
    }
    const admin = () => {
        console.log("admin");
    }
    const home = () => {
        console.log("home");
    }
    const individual = () => {
        console.log("individual");
    }
    function handleLogout() {
        dispatch(logout());
    }
    return (
        <div className='header_head'>
            <div className='header_right'>
                <Link to="/home"><span className='btns' onClick={home}>首页</span></Link>
                {
                    isLoggedIn ?
                        <a>
                            <span className='btns' onClick={login}>
                                用户名：{account} <button className="cancellation" onClick={handleLogout}>注销</button>
                            </span>
                        </a>
                        :
                        <div style={{ display: "inline-block" }}>
                            <Link to="/login"><span className='btns' onClick={login}>登录</span></Link>
                            <Link to="/register"><span className='btns' onClick={register}>注册</span></Link>
                        </div>
                }
                <span><BellOutlined className='icon' /></span>
                <Link to="/individual"><span className='btns' onClick={individual}>个人中心</span></Link>
                {/* <span className='btns'><ShoppingCartOutlined className='icon' />购物车</span> */}
                <Link to="/admin"><span className='btns' onClick={admin}><TeamOutlined />管理员</span></Link>
                <span className='customer'>客服热线 <span className='customer_phone'>400-023-0519</span></span>
            </div>
        </div>
    )
}

export default Header
